<template>
	<view class="container">

		<!-- 顶部图片 -->
		<view class="header-container">
			<view class="banner">
				<image class="banner-bg" src="https://www.ggshop1688.com/upload/api-img/exchange-banner.jpg"></image>
				<image class="banner-bg-bottom" src="/static/arc.png"></image>
			</view>
		</view>

		<!-- 商品分类 -->
		<view class="cate-section">
			<block v-for="(item,index) in dataList.cats" :key='index'>
				<view class="cate-item" @click="navCate(item)">
					<image :src="item.catImg"></image>
					<text>{{item.simpleName}}</text>
				</view>
			</block>
		</view>

		<!-- 人气精选 -->
		<view class="select">
			<view class="select-head">
				<!-- <image src="" mode=""></image> -->
				<h6 class="select-head-title">
					人气精选
				</h6>
			</view>
			<!-- 人气精选内容列表 -->
			<view class="select-list">
				<block v-for="(item,index) in goodsList" :key="index">
					
					<view class="select-item" >
						<!-- 商品图片 -->
						<view class="select-pic" @click="toDetail(item.goodsId)">
							<image :src="item.goodsImg" mode="aspectFill"></image>
						</view>
						<!-- 商品详情 -->
						<view class="select-content">
							<!-- <view class="select-content-p1">
							<text class="select-content-business">{{item.business}}</text>|
							<text class="select-content-shopname">{{item.shopName}}</text>
						</view> -->
							<view class="select-content-p2">
								<text class="select-content-title">{{item.goodsName}}</text>
							</view>
							<view class="select-content-p3">
								<view class="">
									<text class="select-content-price">{{item.exchange_price_gg_credit >0 ? '需要消费奖励金' :'需要消费积分'}}</text>
									<!-- <text class="select-content-original">￥{{item.rebate_gg_credit}}</text> -->
								</view>
								<view class="select-content-ticket-wrap">
									<text class="select-content-ticket" v-if="item.exchange_price_gg_credit>0" @click="toGoodsDetail(item.goodsId,item.shop)"><span>￥</span>{{item.exchange_price_gg_credit}}</text>
									<text class="select-content-ticket" v-else @click="toGoodsDetail(item.goodsId,item.shop)"><span>￥</span>{{item.exchange_price_cert_num}}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>

			<empty v-if="showempty" style="padding-top: 20px;" emptyText="暂无数据"></empty>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue"
	export default {
		components: {
			empty,
		},
		data() {
			return {
				showempty: false,
				dataList: [],
				goodsList: []
			};
		},
		mounted() {
			this.getNavData()
		},
		methods: {
			
			toDetail(id){
				uni.navigateTo({
					url:'/pages/product/product?id='+id
				})
			},
			getNavData() {
				let _this = this
				_this.$Request.request('/api/goods/getIndexInfo', 'GET', {

				}).then(res => {
					_this.dataList = res.data
					// _this.dataList.cats[7].simpleName = '全部'
					// _this.goodsList = res.data.like
					_this.navCate([])
				}).catch(err => {
					console.log(err)
				})
			},
			// 点击菜单栏获取对应分类数据
			navCate(item) {
				let _this = this
				let id = item.catId || ''
				_this.$Request.request('/api/goods/getExchangeGoodsList', 'POST', {
					catId: id,
					p: 1
				}).then(res => {
					_this.goodsList = res.data.list
					if (_this.goodsList.length == 0) {
						this.showempty = true;
					} else {
						this.showempty = false;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 跳转到商品详情页
			toGoodsDetail(id, shop) {
				let that = this;
				var shop_ = JSON.stringify(shop)
				uni.navigateTo({
					url: './exchangeorder?goodsId=' + id + "&shop=" + shop_
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-content-price {
		font-size: 12px;
		display: flex;
		align-items: center;
	}

	.emImage {
		width: 100%;
	}

	.select-content-ticket-wrap {
		.select-content-ticket {
			width: inherit;
		}
	}

	@import './exchange.scss'
</style>
